## Ereignisse in JavaScript
Ereignisse sind Aktionen oder Ereignisse, die in einer Webanwendung stattfinden.
Sie werden durch Benutzerinteraktionen wie das Klicken auf eine Schaltfläche, das Bewegen des Mauszeigers über ein Element oder das Drücken einer Taste auf der Tastatur ausgelöst.
Weitere Beispiele für Ereignisse sind die Größenänderung eines Fensters, das Scrollen eines Dokuments oder das Laden einer Seite.
Ereignisse können verwendet werden, um eine Webanwendung interaktiver und reaktionsfähiger zu machen, indem sie dem Benutzer Feedback geben und Aktionen basierend auf den Eingaben des Benutzers auslösen.
Ereignisbehandlung in JavaScript
Um Ereignisse in JavaScript zu verarbeiten, können wir Ereignis-Listener verwenden.
Ereignis-Listener sind Funktionen, die aufgerufen werden, wenn ein bestimmtes Ereignis auf einem Zielelement auftritt.
Mit der Methode „addEventListener()“ können wir einem Element einen Ereignis-Listener hinzufügen.
Das erste Argument von „addEventListener()“ ist der Ereignisname und das zweite Argument ist die Ereignishandlerfunktion.
„Javascript
const button =document.querySelector('button');
// Einen Ereignis-Listener für das „Klick“-Ereignis auf der Schaltfläche hinzufügen
button.addEventListener('click', () => {
console.log('Auf die Schaltfläche wurde geklickt!');
});
„
Im obigen Beispiel fügen wir einem Schaltflächenelement einen Ereignis-Listener für das „Click“-Ereignis hinzu.
Wenn der Benutzer auf die Schaltfläche klickt, wird die Event-Handler-Funktion ausgeführt und die Meldung „Auf die Schaltfläche wurde geklickt!“ wird in der Konsole protokolliert.
Wir können Ereignis-Listener auch mit der Methode „removeEventListener()“ aus Elementen entfernen.
Das erste Argument von „removeEventListener()“ ist der Ereignisname und das zweite Argument ist die Ereignishandlerfunktion.
„Javascript
button.removeEventListener('click', () => {
console.log('Auf die Schaltfläche wurde geklickt!');
});
„
Im obigen Beispiel entfernen wir den Ereignis-Listener für das „Click“-Ereignis aus dem Schaltflächenelement.
Dies bedeutet, dass die Event-Handler-Funktion nicht mehr ausgeführt wird, wenn der Benutzer auf die Schaltfläche klickt.
Ereignisobjekt
Wenn ein Ereignis auftritt, wird ein Objekt namens Ereignisobjekt verwendet entsteht.
Das Ereignisobjekt enthält Informationen über das Ereignis, beispielsweise das Zielelement, den Ereignistyp und die Mausposition.
Mit dem Parameter „event“ können wir in einer Event-Handler-Funktion auf das Event-Objekt zugreifen.
„Javascript
button.addEventListener('click', (event) => {
console.log(event);
});
„
Im obigen Beispiel protokollieren wir das Ereignisobjekt in der Konsole.
Dadurch können wir Informationen über das Klickereignis sehen, z. B. das Zielelement, den Ereignistyp und die Mausposition.
Ereignis-Bubbling und -Erfassung
Ereignis sprudelt bezieht sich auf die Art und Weise, wie sich Ereignisse durch den DOM-Baum verbreiten.
Wenn ein Ereignis auftritt, wird es zunächst auf dem Zielelement ausgelöst.
Wenn das Zielelement keinen Ereignis-Listener für das Ereignis hat, wird das Ereignis an das übergeordnete Element weitergeleitet.
Dies wird fortgesetzt, bis das Ereignis die Spitze des DOM-Baums erreicht.
Ereigniserfassung ist das Gegenteil von Event-Bubbling.
Wenn die Ereigniserfassung aktiviert ist, werden Ereignisse zunächst oben im DOM-Baum ausgelöst und dann bis zum Zielelement weitergegeben.
Wir können die Ereigniserfassung aktivieren, indem wir den dritten Parameter der Methode „addEventListener()“ auf „true“ setzen.
„Javascript
button.addEventListener('click', (event), true);
„
Im obigen Beispiel aktivieren wir die Ereigniserfassung für das „Klick“-Ereignis auf dem Schaltflächenelement.
Das bedeutet, dass das „Klick“-Ereignis zuerst oben im DOM-Baum ausgelöst wird und sich dann nach unten auf das Schaltflächenelement ausbreitet.
Fazit
Ereignisse sind ein grundlegender Bestandteil von JavaScript und werden verwendet, um Webanwendungen interaktiver und reaktionsfähiger zu machen.
Indem wir verstehen, wie Veranstaltungen funktionieren, können wir Webanwendungen erstellen, die mehr Spaß machen und benutzerfreundlicher sind.
